<script setup lang='ts'>
import { FilterOutlined, PlusOutlined, SearchOutlined } from '@ant-design/icons-vue'
import type { PropType } from 'vue'

defineProps({
  placeholder: {
    type: String,
    default: '',
  },
  value: {
    type: String,
    default: '',
  },
  showFiltering: {
    type: Boolean,
    default: true,
  },
  showAdd: {
    type: Boolean,
    default: true,
  },
  showExport: {
    type: Boolean,
    default: false,
  },
  columns: {
    type: Array,
    default: () => {
      return []
    },
  },
  dataSource: {
    type: Array,
    default: () => {
      return []
    },
  },
  pagination: {
    type: Object,
    default: () => {
      return {}
    },
  },
  rowClassName: {
    type: Object,
    default: () => {},
  },
  loading: {
    type: Boolean,
    default: false,
  },
  queryForm: {
    type: Object as PropType<PageQuery>,
    default: () => {
      return {}
    },
  },
})

const emit = defineEmits(['update:value', 'onQuery', 'showModal', 'showDetail', 'sortChange', 'exportExcel'])
const queryFormRef = ref()
const inputContent = ref('')

const showTableFilterPopover = ref(false)

function fetchList(isClear: boolean = false) {
  showTableFilterPopover.value = false
  emit('update:value', inputContent.value, isClear)
  emit('onQuery', inputContent.value, isClear)
}

function clearQuery() {
  inputContent.value = ''
  fetchList(true)
}

const showModal = () => emit('showModal', true)
const exportExcel = () => emit('exportExcel', true)

const popoverContainer = () => document.querySelector('.bh-table-container')

defineExpose({ clearQuery })
</script>

<template>
  <div>
    <a-form ref="queryFormRef" :model="queryForm" label-align="left" :colon="false">
      <div class="flex items-center gap-10px">
        <a-input
          v-model:value="inputContent" :placeholder="placeholder"
          @press-enter="fetchList(false)"
        >
          <template #prefix>
            <SearchOutlined />
          </template>
        </a-input>
        <div class="bh-table-title-suffix">
          <div class="bh-table-title-suffix-content">
            <slot name="filter" />
            <a-popover
              v-if="showFiltering"
              :get-popup-container="popoverContainer" placement="bottomRight"
              overlay-class-name="bh-table-filter-popover"
              trigger="click"
              :open="showTableFilterPopover" @click="showTableFilterPopover = true"
            >
              <template #content>
                <div class="bh-popover-container">
                  <div class="bh-popover-title">
                    <h4>高级筛选</h4>
                    <a-button class="bh-clear-btn" type="link" size="small" @click="clearQuery">
                      <template #icon>
                        <bh-icon type="icon-qingchu" />
                      </template>
                      清除
                    </a-button>
                  </div>
                  <div class="bh-popover-content">
                    <slot name="filterPopover" />
                  </div>
                  <div class="bh-popover-footer">
                    <a-button @click="showTableFilterPopover = false">
                      取消
                    </a-button>
                    <a-button type="primary" @click="fetchList(false)">
                      查询
                    </a-button>
                  </div>
                </div>
              </template>
              <a-button class="bh-filter-btn">
                <template #icon>
                  <FilterOutlined />
                </template>
              </a-button>
            </a-popover>

            <a-popover v-if="showExport" placement="bottomRight" :get-popup-container="popoverContainer">
              <a-button class="bh-filter-btn" @click="exportExcel">
                <template #icon>
                  <bh-icon name="icon-daochudaoEXCEL" />
                </template>
              </a-button>
              <template #content>
                <p style="margin-bottom: 0;">
                  导出EXCEL
                </p>
              </template>
            </a-popover>

            <a-button v-if="showAdd" type="primary" @click="showModal">
              <template #icon>
                <PlusOutlined />
              </template>
              新增
            </a-button>
          </div>
        </div>
      </div>
    </a-form>
  </div>
</template>

<style scoped lang='less'>
@import "./index";
</style>
